<template>
  <div class="main">
    <div class="title">
      <div>
        <div>新闻咨询</div>
      </div>
    </div>
    <div class="content">
      <div>
        <div>
          <div>
            <img :src="newsImages[0].url" alt="" />
          </div>
          <div>
            <div>
              <span>请查收你的2023年记忆</span>
            </div>
            <div>请查收你的2023年记忆</div>
          </div>
        </div>
        <div>
          <div>
            <img :src="newsImages[1].url" alt="" />
          </div>
          <div>
            <div>
              <span>2023年度报告你喝醉了吗哈哈!!!</span>
            </div>
            <div>据专家介绍，快递服务真的是个好东西啊</div>
          </div>
        </div>
      </div>
      <div>
        <div>
          <div><img :src="newsImages[3].url" alt="" /></div>
          <div>
            <div>
              <span>飞鸟物流正式开通高铁服务</span>
            </div>
            <div>重庆到成都高铁物流最快仅需1小时...</div>
          </div>
        </div>
        <div>
          <div><img :src="newsImages[2].url" alt="" /></div>
          <div>
            <div>
              <span>震惊！一某高校学生持枪抢劫，已造成一百人受伤</span>
            </div>
            <div>一某高校学生持枪</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { News } from "@/common/common";

interface NewsImage {
  id: number;
  url: string;
}
let newsImages = reactive<NewsImage[]>([
  { id: 1, url: News.url1 },
  { id: 2, url: News.url2 },
  { id: 3, url: News.url3 },
  { id: 4, url: News.url4 },
]);
</script>

<style scoped lang="less">
.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 65vh;
  .title {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    > div:first-child {
      width: 40%;
      height: 80%;

      display: flex;
      justify-content: center;
      align-items: center;
      > div {
        font-weight: 700;
        font-size: 2rem;
        color: #333;
      }
    }
  }
  .content {
    flex: 3;
    display: flex;
    flex-direction: column;
    > div:first-child {
      margin-bottom: 10px;
      flex: 1;
      display: flex;
      justify-content: space-evenly;
      > div:first-child {
        width: 30%;
        height: 70%;
        display: flex;
        > div:first-child {
          flex: 1;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        > div:nth-child(2) {
          flex: 1;
          display: flex;
          justify-content: space-evenly;
          flex-direction: column;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 1rem;
          color: #333;
          font-weight: bold;
          > div:first-child {
            height: 20%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            span {
              margin-left: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          > div:nth-child(2) {
            height: 20%;
            margin-top: 3px;
            font-size: 0.8rem;
            color: #666;
            overflow: hidden;
            padding-left: 10px;
          }
        }
      }
      > div:nth-child(2) {
        width: 30%;
        height: 70%;
        display: flex;
        > div:first-child {
          flex: 1;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        > div:nth-child(2) {
          flex: 1;
          display: flex;
          justify-content: space-evenly;
          flex-direction: column;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 1rem;
          color: #333;
          font-weight: bold;
          > div:first-child {
            height: 20%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            span {
              margin-left: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          > div:nth-child(2) {
            height: 20%;
            margin-top: 3px;
            font-size: 0.8rem;
            color: #666;
            overflow: hidden;
            padding-left: 10px;
          }
        }
      }
    }
    > div:nth-child(2) {
      margin-bottom: 10px;
      flex: 1;
      display: flex;
      justify-content: space-evenly;
      > div:first-child {
        width: 30%;
        height: 70%;
        display: flex;
        > div:first-child {
          flex: 1;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        > div:nth-child(2) {
          flex: 1;
          display: flex;
          justify-content: space-evenly;
          flex-direction: column;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 1rem;
          color: #333;
          font-weight: bold;
          > div:first-child {
            height: 20%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            span {
              margin-left: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          > div:nth-child(2) {
            height: 20%;
            margin-top: 3px;
            font-size: 0.8rem;
            color: #666;
            overflow: hidden;
            padding-left: 10px;
          }
        }
      }
      > div:nth-child(2) {
        width: 30%;
        height: 70%;
        display: flex;
        > div:first-child {
          flex: 1;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        > div:nth-child(2) {
          flex: 1;
          display: flex;
          justify-content: space-evenly;
          flex-direction: column;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 1rem;
          color: #333;
          font-weight: bold;
          > div:first-child {
            height: 20%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            span {
              margin-left: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          > div:nth-child(2) {
            height: 20%;
            margin-top: 3px;
            font-size: 0.8rem;
            color: #666;
            overflow: hidden;
            padding-left: 10px;
          }
        }
      }
    }
  }
}
</style>
